---
title: Checkbox Card
description: Used to select or deselect options displayed within cards.
links:
  source: components/checkbox-card
  storybook: components-checkbox-card--basic
  recipe: checkbox-card
  ark: https://ark-ui.com/react/docs/components/checkbox
---

<ExampleTabs name="checkbox-card-basic" />

## Anatomy

```jsx
import { CheckboxCard } from '@saas-ui/react/checkbox-card'
```

```jsx
<CheckboxCard label="Checkbox Card" />
```

## Examples

### Group

Use the `CheckboxCardGroup` component to group multiple checkbox cards.

<ExampleTabs name="checkbox-card-with-group" />

### Sizes

Use the `size` prop to change the size of the checkbox card.

<ExampleTabs name="checkbox-card-with-sizes" />

### Variants

Use the `variant` prop to change the variant of the checkbox card.

<ExampleTabs name="checkbox-card-with-variants" />

### Disabled

Use the `disabled` prop to make the checkbox card disabled.

<ExampleTabs name="checkbox-card-disabled" />

### Addon

Use the `CheckboxCardAddon` to add some more context to the checkbox card.

<ExampleTabs name="checkbox-card-with-addon" />

### Icon

Render custom icons within the checkbox card.

<ExampleTabs name="checkbox-card-with-icon" />

## Props

### Root

<PropTable component="CheckboxCard" part="Root" />
